<template>
  <div class="my-select2" @click="onSelectClicked" ref="parent">
        <div class="my-current-option">
            <span>{{currentData?currentData.name:''}}</span>
            <img src="./images/arrow.png" width="10"/>
          </div>
        <div class="option-list" ref="optionList">
             <div class="search-container" v-if="remotesearch">
                   <input type="text" class="search" @input="onSearch($event)">
               </div>
             <div class="my-options" ref="options">
                   <ul>
                         <li v-for="item in data" :data-value="item.value" @click.stop="onSelectChange(item.value)" :class="{'active':currentData.value===item.value}">
                               {{item.name}}
                           </li>
                     </ul>
               </div>
          </div>
      </div>
</template>
<script>
var VSelect = {
  name: 'VSelect',
  props: {
    ctxpath: {
      type: String,
      required: true
    },
    data: {
      type: Array,
      required: true,
      validate: function (value) {
        var keyValidate = value.map(item => !!item.name && !!item.value)
        return keyValidate.indexOf(false) === -1;
      }
    },
    remotesearch: {
      type: Boolean,
      default: function () {
        return false;
      }
    }
  },
  data: function () {
    return {
      currentData: {},
      betterScrollOption: {
        mouseWheel: {}
      },
      yearSelectionScroll: null
    }
  },
  watch: {
    data: function (newVal, OldVal) {
      var self = this;
      self.defaultSelect();
    }
  },
  methods: {
    bindSelectionScroll: function () {
      if (!this.yearSelectionScroll) {
        var wrapper = this.$refs.options;
        var bs = BetterScroll.createBScroll(wrapper, this.betterScrollOption);
        this.yearSelectionScroll = bs;
      }
    },
    unbindSelectionScroll: function () {
      if (this.yearSelectionScroll) {
        this.yearSelectionScroll.destroy();
        this.yearSelectionScroll = null;
      }
    },
    onSelectClicked: function () {
      this.$refs.optionList.style.cssText = 'display: block;';
      this.bindSelectionScroll();
      let extraTransform = {
        // 起点的属性
        start: {
          scale: 0
        },
        // 终点的属性
        end: {
          scale: 1.1
        }
      }
      this.yearSelectionScroll.scrollTo(0, 0, 300, undefined, extraTransform)
    },
    onSelectChange: function (value) {
      this.currentData = this.data.find(function (item) {
        return item.value === value;
      });
      this.$emit('change', value);
      this.$refs.optionList.style.cssText = 'display: none;'
      this.unbindSelectionScroll();
    },
    hideList: function () {
      this.$refs.optionList.style.cssText = 'display: none;'
      this.unbindSelectionScroll();
    },
    defaultSelect: function () {
      var selectedData = this.data.find(function (item) {
        return !!item.selected;
      })
      if (selectedData) {
        this.currentData = Object.assign({}, selectedData);
      } else {
        this.currentData = Object.assign({}, this.data[0]);
      }
      this.$emit('change', this.currentData.value);
    },
    clickCoutsideHandler: function (element, callback) {
      return function (e) {
        function clickOutside(e) {
          return !element.contains(e.target);
        }

        var isClickOutside = clickOutside(e);
        callback(isClickOutside);
      }
    },
    bindSelectionClickOutside: function (element, callback) {
      document.addEventListener('click', this.clickCoutsideHandler(element, callback));
    },
    unbindSelectionClickOutside: function (element, callback) {
      document.removeEventListener('click', this.clickCoutsideHandler(element, callback));
    },
    clickOutsideAndHideList: function (isClickOutside) {
      isClickOutside && this.hideList();
    },
    onSearch(evt) {
      this.$emit('search', evt.target.value)
    },
    getCurrentData() {
      return this.currentData
    }
  },
  mounted: function () {
    var self = this;
    self.defaultSelect();
    self.bindSelectionClickOutside(self.$refs.parent, self.clickOutsideAndHideList);
  },
  unmount: function () {
    var self = this;
    self.unbindSelectionClickOutside(self.$refs.parent, self.clickOutsideAndHideList);
  }
}
export default VSelect
</script>
<style scoped>
@import './select2.css';
</style>

